<template>
    <div>
        <h2>Add New Cargo</h2>
        <form @submit.prevent="addCargo">
            <label for="inboundDate">入库时间:</label>
            <input type="date" id="inboundDate" v-model="newCargo.inboundDate" required><br><br>

            <label for="licensePlate">车牌号:</label>
            <input type="text" id="licensePlate" v-model="newCargo.licensePlate" required><br><br>

            <label for="inboundQuantity">入库件数:</label>
            <input type="number" id="inboundQuantity" v-model.number="newCargo.inboundQuantity" required><br><br>

            <label for="inboundWeight">入库吨数:</label>
            <input type="number" step="0.01" id="inboundWeight" v-model.number="newCargo.inboundWeight" required><br><br>

            <label for="shippingDate">开船日:</label>
            <input type="date" id="shippingDate" v-model="newCargo.shippingDate" required><br><br>

            <label for="orderNumber">订单号:</label>
            <input type="text" id="orderNumber" v-model="newCargo.orderNumber" required><br><br>

            <label for="outboundQuantity">出库件数:</label>
            <input type="number" id="outboundQuantity" v-model.number="newCargo.outboundQuantity"><br><br>

            <label for="outboundWeight">出库吨数:</label>
            <input type="number" step="0.01" id="outboundWeight" v-model.number="newCargo.outboundWeight"><br><br>

            <label for="billOfLading">提单号:</label>
            <input type="text" id="billOfLading" v-model="newCargo.billOfLading"><br><br>

            <label for="businessNumber">业务号:</label>
            <input type="text" id="businessNumber" v-model="newCargo.businessNumber"><br><br>

            <button type="submit">Add Cargo</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            newCargo: {
                inboundDate: '',
                licensePlate: '',
                inboundQuantity: null,
                inboundWeight: null,
                shippingDate: '',
                orderNumber: '',
                outboundQuantity: null,
                outboundWeight: null,
                billOfLading: '',
                businessNumber: ''
            }
        };
    },
    methods: {
        async addCargo() {
            try {
                await axios.post('/cargo/inbounds', this.newCargo);
                alert('Cargo added successfully!');
                this.$emit('cargo-added');
                this.resetForm();
            } catch (error) {
                console.error('There was an error adding the cargo!', error);
            }
        },
        resetForm() {
            this.newCargo = {
                inboundDate: '',
                licensePlate: '',
                inboundQuantity: null,
                inboundWeight: null,
                shippingDate: '',
                orderNumber: '',
                outboundQuantity: null,
                outboundWeight: null,
                billOfLading: '',
                businessNumber: ''
            };
        }
    }
};
</script>

<style scoped>
form {
    max-width: 400px;
    margin: auto;
}

label {
    display: block;
    margin-top: 10px;
}

input[type="text"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
}

button {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
</style>



